import Image from 'next/image'
import { Link } from '@/src/navigation'
import { useImagePlaceholder } from '@/src/app/hooks/useImagePlaceholder'
import dayjs from 'dayjs'
import { useTranslations } from 'next-intl'

import arrowBlackIcon from '@/public/arrow_right_black.png'
import arrowWhiteIcon from '@/public/arrow_right_white.png'

interface ArticleProps {
  id: string
  picture: string
  category: string
  title: string
  desc: string
  createdAt: string | number
}

const Article: React.FC<ArticleProps> = async (props) => {
  const { id, picture, category, title, desc, createdAt } = props
  const t = useTranslations('home.news')
  const { base64 } = await useImagePlaceholder(picture)
  return (
    <Link href={`/news-detail/${id}`}>
      <div className='cursor-pointer'>
        {/* 图片容器 */}
        <div className='relative flex flex-col'>
          {/* 决定宽高比 */}
          <div className='aspect-w-[10] aspect-h-[8] lg:aspect-h-[7]' />
          {/* 左上角标签 */}
          <div className='absolute z-[20] top-0 left-0 flex flex-col items-center bg-[#282828] px-[0.34375rem] py-[0.40625rem] lg:px-[0.3125rem] lg:py-[0.3125rem] 2xl:px-[0.46875rem] 2xl:py-[0.46875rem]'>
            <div className='text-[0.875rem] leading-[0.875rem] text-white font-medium lg:text-[1rem] lg:leading-[1rem] 2xl:text-[1.5rem] 2xl:leading-[1.5rem]'>
              {dayjs.unix(Number(createdAt)).format('DD')}
            </div>
            <div className='w-[0.84375rem] lg:w-[1.125rem] 2xl:w-[1.6875rem] h-[1px] my-[0.3125rem] bg-white bg-opacity-50' />
            <div className='text-[0.75rem] leading-[0.875rem] text-white font-medium 2xl:text-[1.125rem] 2xl:leading-[1.3125rem]'>
              {dayjs.unix(Number(createdAt)).format('MMM')}
            </div>
          </div>
          <Image
            src={picture}
            alt='image'
            fill
            style={{ objectFit: 'cover' }}
            sizes='(max-width: 1024px) 44vw, (max-width: 1536px) 25vw, 25vw'
            placeholder='blur'
            blurDataURL={base64}
          />
        </div>
        {/* Content */}
        <div className='p-3 pb-4 bg-white lg:p-[0.9375rem] lg:pb-[1.5625rem] 2xl:p-[1.40625rem] 2xl:pb-[2.34375rem]'>
          <div className='text-[0.875rem] leading-[1rem] text-[#A6C32D] font-medium lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[1.125rem] 2xl:leading-[1.5rem]'>
            {category}
          </div>
          <div className='h-1 lg:h-4 2xl:h-[6]' />
          <div className='text-[#333333] text-[0.875rem] leading-[1.125rem] font-bold lg:text-[0.8125rem] lg:leading-[1.1875rem] 2xl:text-[1.21875rem] 2xl:leading-[1.78125rem]'>
            {title}
          </div>
          <div className='h-5' />
          <div className='text-[0.75rem] leading-[1rem] text-[#999999] font-medium lg:text-[0.75rem] lg:leading-[1.1875rem] 2xl:text-[1.125rem] 2xl:leading-[1.78125rem] line-clamp-2'>
            {desc}
          </div>
          <div className='h-[0.78125rem] lg:h-[0.875rem] 2xl:h-[1.3125rem]' />
          <button className='group flex items-center border-solid border-[0.5px] border-black px-[0.96875rem] py-[0.65625rem] lg:px-[0.875rem] lg:py-[0.6875rem] 2xl:px-[1.3125rem] 2xl:py-[1.03125rem] hover:bg-[#202227] transition-colors duration-200 ease-in-out'>
            <div className='text-[0.75rem] leading-[0.875rem] text-#202227 font-medium lg:text-[0.75rem] lg:leading-[1.1875rem] 2xl:text-[1.125rem] 2xl:leading-[1.78125rem] group-hover:text-white'>
              {t('readMore')}
            </div>
            <div className='w-1 2xl:w-[0.375rem]' />
            <div className='group-hover:hidden relative w-[0.78125rem] h-[0.46875rem] 2xl:w-[1.171875rem] 2xl:h-[0.703125rem]'>
              <Image
                src={arrowBlackIcon}
                alt='arrow icon'
                fill
                sizes='(max-width: 1024px) 0.78125rem'
              />
            </div>
            <div className='hidden group-hover:block relative w-[0.78125rem] h-[0.46875rem] 2xl:w-[1.171875rem] 2xl:h-[0.703125rem]'>
              <Image
                src={arrowWhiteIcon}
                alt='arrow icon'
                fill
                sizes='(max-width: 1024px) 0.78125rem'
              />
            </div>
          </button>
        </div>
      </div>
    </Link>
  )
}

export default Article
